<template>
    <div id="productpie" style="width: 49%; height: 260px;"></div>
</template>

<script setup>
//引入echarts
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() =>{
    initCart()
})
const initCart = () => { 
    const myChart = echarts.init(document.getElementById('productpie'))
    let option = {
        title: {
            text: 'Nightingale Chart',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 100],
                center: ['55%', '65%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 30, name: 'rose 1' },
                    { value: 28, name: 'rose 2' },
                    { value: 26, name: 'rose 3' },
                    { value: 24, name: 'rose 4' },
                    { value: 22, name: 'rose 5' },
                    { value: 20, name: 'rose 6' },
                    { value: 18, name: 'rose 7' },
                    { value: 16, name: 'rose 8' }
                ]
            }
        ]
    };

    myChart.setOption(option);

}
</script>

<style  scoped>

</style>